/* 头部 */
.header{
    border:0px;
    border-radius: 0px;

    /*粘性定位 当在最顶端的时候 跟正常头部一样
    当滚动条滚动之后，变成固定定位一样*/
    position: sticky;
    left:0;
    top:0;
    width:100%;
    z-index:10;
    background: #fff;
    .container{
        .list{
            display: flex;
            justify-content: space-between;
            
            .logo{
                color:rgb(2, 78, 192);
                text-transform: uppercase;
                font-size: 3em;
            }
            .item{
                display: flex;
                align-items: center;
                color: #000;
                span{
                    font-family: OSBold;
                }
            }
        }
    }

    // 当前屏幕 <= 600px  max-width:600px 
    @media screen and (max-width:600px){
        .container{
            .list{
                .logo{
                    font-size: 2.5em;
                }
            }
        }
    }

    // 当前屏幕 <= 500px  max-width:500px 
    @media screen and (max-width:500px){
        .container{
            .list{
                .logo{
                    font-size: 2em;
                }
                .item{
                    font-size: .7em;
                }
            }
        }
    }

    // 当前屏幕 <= 400px  max-width:400px 
    @media screen and (max-width:400px){
        .container{
            .list{
                flex-wrap: wrap;
                justify-content: center;
                .logo{
                    text-align: center;
                    width: 100%;
                }
            }
        }
    }
}


// 底部
.footer{
    width: 100%;
    background: #111111;
    color: #fff;
    padding:1% 0%;
    .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .list{
            width: 50%;
            display: flex;
            justify-content: space-between;
            .item{
                width: 20%;
                text-align: center;
            }
        }
    }
    @media screen and (max-width:1000px) {
        .container{
            text-align: center;
            .list{
                width: 100%;
            }
            .box{
                width: 50%;
            }
            .content{
                width: 50%;
            }
        }
    }

    @media screen and (max-width:500px) {
        .container{
            text-align: center;
            .list{
                width: 100%;
            }
            .box{
                width: 100%;
            }
            .content{
                width: 100%;
            }
        }
    }

    @media screen and (max-width:400px) {
        .container{
            .list{
                font-size: .8em;
            }
            .box{
                font-size: .8em;
            }
            .content{
                font-size: .8em;
            }
        }
    }

    @media screen and (max-width:350px) {
        .container{
            .list{
                font-size: .6em;
            }
            .box{
                font-size: .6em;
            }
            .content{
                font-size: .6em;
            }
        }
    }
}
